<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Validations</title>
    <link rel="stylesheet" href="bootstrap-3/bootstrap-3.3.7-dist/css/bootstrap.min.css" type="text/css"/>
    <link rel="stylesheet" href="css/base.css" type="text/css"/>
    <link rel="stylesheet" href="css/Validations.css" type="text/css"/>
    <link rel="stylesheet" href="Font-Awesome-3/Font-Awesome-3.2.1/css/font-awesome.min.css" type="text/css"/>
    <script src="jq/jquery.min.js"></script>
    <script src="bootstrap-3/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
<!--头部 start-->
<div class="container-fluid">
    <nav class="navbar navbar-default" role="navigation">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">
                <i class="glyphicon glyphicon-heart-empty"></i>
                <span>Flatty</span>
            </a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1 row">
            <ul class="nav navbar-nav">
                <li><a href="#" class="glyphicon glyphicon-align-justify"></a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <form class="navbar-form navbar-left " role="search">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search">
                            <i class="glyphicon glyphicon-search"></i>
                        </div>
                    </form>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle glyphicon glyphicon-adjust" data-toggle="dropdown"></a>
                    <ul class="dropdown-menu color">
                        <li>
                            <p>Body color</p>
                        </li>
                        <li>
                            <a href="#">
                               <span>Light (default)</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span>Dark</span>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <p>Contrast color</p>
                        </li>
                        <li>
                            <a href="#">
                                <i class="glyphicon glyphicon-user red"></i>
                                <span>Red (default)</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="glyphicon glyphicon-user blue"></i>
                                <span>Blue</span>
                            </a>
                        </li>
                        <li class="icon-change">
                            <a href="#">
                                <i class="glyphicon glyphicon-user orange"></i>
                                <span>Orange</span>
                            </a>
                        </li>
                        <li class="icon-change">
                            <a href="#">
                                <i class="glyphicon glyphicon-user purple"></i>
                                <span>Purple</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="glyphicon glyphicon-user green"></i>
                                <span>Green</span>
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="#">
                                <i class="glyphicon glyphicon-user"></i>
                                <span>John Doe signed up</span>
                                <span>just now</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="glyphicon glyphicon-user"></i>
                                <span>John Doe signed up</span>
                                <span>just now</span>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="#">ALL notifications</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                       <img src="img/avatar.jpg">
                        <span>Mila Kunis</span>
                        <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#"><i class="glyphicon glyphicon-user"></i><span>Profile</span></a></li>
                        <li><a href="#"><i class="glyphicon glyphicon-cog"></i><span>Settings</span></a></li>
                        <li class="divider"></li>
                        <li><a href="#">Sign out</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </nav>
</div>
<!--头部 end-->
<main>
    <div class="content-left">
        <ul class="left-list">
            <li class="list-item">
                <a href="index.html">
                    <i class="icon-dashboard"></i>
                    <span class="list-item-font">Dashboard</span>
                </a>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-edit"></i>
                    <span class="list-item-font">Forms</span>
                    <i class="icon-angle-down angle-down"></i>
                </a>
                <ul class="left-list-little">
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                            <span>Form styles and features</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                            <span>Form components</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="Validations.html">
                            <i class="icon-caret-right"></i>
                            <span>Validations</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="Wizard.html">
                            <i class="icon-caret-right"></i>
                            <span>Wizard</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-tint"></i>
                    <span class="list-item-font">UI Elements & Widgets</span>
                    <i class="icon-angle-down angle-down"></i>
                </a>
                <ul class="left-list-little">
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                            <span>UI Elements</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="Widgets.html">
                            <i class="icon-caret-right"></i>
                            <span>Widgets</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="list-item">
                <a href="buttons-and-icon.html">
                    <i class="icon-star"></i>
                    <span class="list-item-font">Buttons & Icons</span>
                </a>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-cogs"></i>
                    <span class="list-item-font">Components</span>
                    <i class="icon-angle-down angle-down"></i>
                </a>
                <ul class="left-list-little">
                    <li class="list-item-little">
                        <a href="chart.html">
                            <i class="icon-bar-chart"></i>
                            <span>Charts</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-envelope"></i>
                            <span>Address book</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-comments"></i>
                            <span>Chats</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-pencil"></i>
                            <span>In-place editing</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-list-ul"></i>
                            <span>File trees</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="Fileupload.html">
                            <i class="icon-file"></i>
                            <span>Fileupload</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="Todo-list.html">
                            <i class="icon-list-alt"></i>
                            <span>Todo list</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="WYSIWYG.html">
                            <i class="icon-paste"></i>
                            <span>WYSIWYG</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="list-item">
                <a href="Tables.html">
                    <i class="icon-table"></i>
                    <span class="list-item-font">Tables</span>
                </a>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-th"></i>
                    <span class="list-item-font">Grid</span>
                </a>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-font"></i>
                    <span class="list-item-font">Typography</span>
                </a>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-calendar"></i>
                    <span class="list-item-font">Calendar</span>
                </a>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-book"></i>
                    <span class="list-item-font">Example pages</span>
                    <i class="icon-angle-down angle-down"></i>
                </a>
                <ul class="left-list-little">
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-money"></i>
                            <span>Invoice</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-picture"></i>
                            <span>Gallery</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-time"></i>
                            <span>Timeline</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-table"></i>
                            <span>Pricing tables</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-user"></i>
                            <span>User profile</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-question-sign"></i>
                            <span>404 Error</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-cogs"></i>
                            <span>500 Error</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-signin"></i>
                            <span>Sign in</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-bullhorn"></i>
                            <span>FAQ</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-inbox"></i>
                            <span>Orders</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-search"></i>
                            <span>Search results</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-circle-blank"></i>
                            <span>Blank page</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-cog"></i>
                    <span class="list-item-font">Layouts</span>
                    <i class="icon-angle-down angle-down"></i>
                </a>
                <ul class="left-list-little">
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                            <span>Closed navigation</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                            <span>Fixed header</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                            <span>Fixed navigation</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                            <span>Fixed navigation & header</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-mail-reply"></i>
                    <span class="list-item-font">Email templates</span>
                </a>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-folder-open-alt"></i>
                    <span class="list-item-font">Four level dropdown</span>
                    <i class="icon-angle-down angle-down"></i>
                </a>
                <ul class="left-list-little">
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                            <span class="list-item-font">Second level</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="list-item"></li>
        </ul>
    </div>
    <div class="content">
        <div class="content-title">
            <div class="subtitle col-sm-6">
                <span class="glyphicon glyphicon-ok"></span>
                <span>Validation</span>
            </div>
            <div class="link ">
                <a class="glyphicon glyphicon-stats"></a>
                <span>Forms ></span>
                <span>Wizard</span>
            </div>
        </div>
        <div class="center">
            <div class="center-box basic">
                <div class="title">
                    <div class="subtitle">Basic validations</div>
                    <div class="icon">
                        <span class="glyphicon glyphicon-remove basic-wrong"></span>
                        <span class="glyphicon glyphicon-chevron-up basic-right"></span>
                    </div>
                </div>
                <div class="center-content  basic-form">
                    <form>
                        <p>
                            <span>Name</span>
                            <input type="text" class="holder" name="name" value="" data-holder="Name">
                        </p>
                        <p>
                            <span>E-mail</span>
                            <input type="text" class="holder" name="name" value="" data-holder="E-mail">
                        </p>
                        <p>
                            <span>Password</span>
                            <input type="text" class="holder" name="name" value="" data-holder="Password">
                        </p>
                        <p>
                            <span>Password confirmation</span>
                            <input type="text" class="holder" name="name" value="" data-holder="Password confirmation">
                        </p>
                        <p>
                            <span>Agree TOS</span>
                            <input type="checkbox">
                        </p>
                        <p class="birth">
                            <span>Birthdate</span>
                            <input type="text" class="holder" name="name" value="" data-holder="YYYY-MM-DD">
                        </p>
                        <p>
                            <span>select</span>
                            <select>
                                <option></option>
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                            </select>
                        </p>
                    </form>
                    <div class="test">
                        <button class="btn btn-primary" type="submit">
                            <i class="icon-save"></i>
                            Test validation
                        </button>
                    </div>
                </div>
            </div>
            <div class="row-fluid">
                <div class="span6 offset3">
                    <div class="text-center">
                        <h2>Custom methods</h2>
                        <small class="muted">You can easily add your own validation methods. These validations are pretty easy to extend.</small>
                    </div>
                </div>
            </div>
            <div class="center-box custom">
                <div class="title customs">
                    <div class="subtitle">Custom validations</div>
                    <div class="icon">
                        <span class="glyphicon glyphicon-remove custom-wrong"></span>
                        <span class="glyphicon glyphicon-chevron-up custom-right"></span>
                    </div>
                </div>
                <div class="center-content custom-form">
                    <form>
                        <p>
                            <span>Secret</span>
                            <input type="text" class="holder" name="name" value="" data-holder="Secret">
                        </p>
                        <p class="explain"><span>Psst, secret "buga"</span></p>
                        <p>
                            <span>Number</span>
                            <input type="text" class="holder" name="name" value="" data-holder="Number">
                        </p>
                        <p>
                            <span>IP</span>
                            <input type="text" class="holder" name="name" value="" data-holder="IP">
                        </p>
                        <p>
                            <span>URL</span>
                            <input type="text" class="holder" name="name" value="" data-holder="URL">
                        </p>
                        <p class="explain"><span>http//</span></p>
                        <p>
                            <span>US phone number</span>
                            <input type="text" class="holder" name="name" value="" data-holder="US phone number">
                        </p>
                        <p>
                            <span>IBAN</span>
                            <input type="text" class="holder" name="name" value="" data-holder="IBAN">
                        </p>
                        <p>
                            <span>VIN</span>
                            <input type="text" class="holder" name="name" value="" data-holder="VIN">
                        </p>
                        <p>
                            <span>1M8GDM9AXKP04278</span>
                        </p>
                    </form>
                    <div class="test">
                        <button class="btn btn-primary" type="submit">
                            <i class="icon-save"></i>
                            Test validation
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
    <script src="jq/Validation.js"></script>
</body>
</html>